<template>
	<view class="comment-input" :style="`bottom:${keyboardHeight}px`">
		<input
			id="commentInput"
			class="uni-input" 
			v-model="commentText"
			:placeholder="placeholderName"
			confirm-type="send"
			:focus="isFocused"
			:adjust-position="false"
			@blur="hideKeyboard"
			@keyboardheightchange="onKeyborardHeightChange" 
			@confirm="handleSubmit"
			@keyup.enter="handleSubmit"
		/>
	</view>
</template>

<script>
	import * as FindApi from '@/api/find'
    import store from '@/store'
	export default {
		data() {
			return {
				keyboardHeight: -100,
				keyboardStatus: false,
				isFocused:false,
				commentText: '',
				posts_id: 0 ,//, 帖子id
				at_id: 0, // 回复给谁 ，无人回复为 0
				placeholderName: ''
			}
		},
		mounted() {
			// 监听点击评论事件
			uni.$on('commentScrollEvent', (y) => {
				console.log('comment-input',y)
				store.dispatch('SetIsRefresh', false)
				if (this.keyboardStatus) {
					console.log('keyboardStatus',this.keyboardStatus)
					this.hideKeyboard();
				} else {
					console.log('keyboardStatus222',this.keyboardStatus)
					this.keyboardHeight = 0
					this.keyboardStatus = true;
					this.isFocused = true
					this.posts_id = y.id
					this.at_id = y.at_id
					this.placeholderName = y.nick_name ? '回复给'+ y.nick_name + ':' : '请输入回复'
					// (this.$refs['commentInput']).focus();
				}
			});
		},
		methods: {
			// 发送键盘高度事件
			keyboardHeightChange() {
				uni.$emit('keyboardHeightEvent', this.keyboardHeight);
			},
			
			// 键盘相关事件
			onKeyborardHeightChange(event) {
				console.log('键盘相关事件',event, this.keyboardStatus)
				if (!this.keyboardStatus) {
					return;
				}
				this.keyboardHeight = event.detail.height - 50;
				this.keyboardHeightChange();
			},
			
			// 失去焦点 - 隐藏键盘
			hideKeyboard() {
				console.log('elementinput',this.$refs.commentInput)
				// this.$refs['commentInput'].blur();
				 //  this.$nextTick(() => {
					// uni.createSelectorQuery().in(this).select('#commentInput').fields({ node: true }).exec((res) => {
					// 	console.log('resinput',res)
					//   if (res[0] && res[0].node) {
					// 	// res[0].node.focus();
					//   }
					// });
				 //  });
				this.isFocused = false
				this.keyboardStatus = false;
				this.keyboardHeight = -100;
			},
			// 提交评论
			handleSubmit() {
				const app = this
				if (this.commentText.trim()) {
					console.log(this.posts_id,this.at_id, this.commentText)
					FindApi.postsCommentCreate({
						"postsId": app.posts_id,//帖子id
						"content":app.commentText,
						"atId": app.at_id, // 回复给谁 ，无人回复为 0
					}).then(result => {
						console.log(result,'result')
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
						uni.$emit('commentSubmitEvent', {content: app.commentText, posts_id: app.posts_id });
						store.dispatch('SetIsRefresh', true)
						app.hideKeyboard()
						app.commentText = ''
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment-input {
		background-color: #fff;
		padding: 10rpx;
		position: fixed;
		bottom: -200rpx;
		left: 0;
		right: 0;
		z-index: 999;
		transition-property: bottom;
		transition-duration: 100ms;
		box-shadow: 0 -10rpx 10px -10px rgba(0, 0, 0, 0.3) inset;
		
		.uni-input {
			background-color: #eee;
			height: 80rpx;
			padding: 0 20rpx;
		}
		
	}
</style>